<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="resources/Jcrop-master/css/jquery.Jcrop.min.css" type="text/css" />
<script src="resources/Jcrop-master/js/jquery.min.js"></script>
<script src="resources/Jcrop-master/js/jquery.Jcrop.min.js"></script>
<script>
		var jcrop_api;
		
		jQuery(function($){
		    $('#target').Jcrop({
		      onChange:   showCoords,
		      onSelect:   showCoords,
		      onRelease:  clearCoords
		    },function(){
		      jcrop_api = this;
		    });

		    $('#coords').on('change','input',function(e){
		      var x1 = $('#x1').val(),
		          x2 = $('#x2').val(),
		          y1 = $('#y1').val(),
		          y2 = $('#y2').val();
		      jcrop_api.setSelect([x1,y1,x2,y2]);
		    });

		  });
		function showCoords(c) {
			$('#x1').val(c.x);
			$('#y1').val(c.y);
			$('#x2').val(c.x2);
			$('#y2').val(c.y2);
			$('#w').val(c.w);
			$('#h').val(c.h);
		}

		function clearCoords() {
			$('#coords input').val('');
		}
		
		function cut(){
			$.ajax({
	             type: "get",
	             url: "JcropServlet?time="+ new Date(),
	             data: {"x1":$('#x1').val(),"x2":$('#x2').val(),"y1":$('#y1').val(),"y2":$('#y2').val()},
	             dataType: "text",
	             success: function(data){
	            	 $("#result").attr("src","resources/"+data);
	            	 window.location.reload();  //刷新
	             },error:function(data){
	            	 alert(data);
	             }
	         });
		}
	</script>
</head>

<body>
	<!-- 原图片 -->
	<img src="resources/fj.jpg" id="target" />
	<form id="coords" onSubmit="return false;"  method="get" action="JCropServlet" >
		<div class="inline-labels">
			<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
			<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
			<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
			<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
			<label>W <input type="text" size="4" id="w" name="w" /></label>
			<label>H <input type="text" size="4" id="h" name="h" /></label>
		</div>
		<button  onclick="cut()">提交</button>
	</form>
	<!-- 截图后的图片 -->
	<img src="resources/fj_crop.jpg" id="result">
</body>
</html>>